<template>
	<view class="roc_scroll_wrap" :style="{height:scrollHeight + 'px',background}">
		<view v-if="triggered" class="refresh">
			<view class="circle circle-1"></view>
			<view class="circle circle-2"></view>
		</view>

		<scroll-view scroll-y @scrolltolower="scrolltolower" class="roc_scroll" refresher-enabled
			:refresher-triggered="triggered" @refresherrefresh="refresherrefresh" @scroll="scroll"
			refresher-default-style="none" :refresher-background="refresher_background"
			:style="{height:scrollHeight + 'px'}">
			<slot name="data-content"> </slot>

			<view class="no-data" v-if="!data_number" :style="{height: scrollHeight - solt_content_height + 'px'}">
				<text class="cuIcon-wefill"></text>
				<text class="tips">暂无查询内容</text>
			</view>

			<view class="has_footer" v-if="show_footer && !hasMore && data_number"
				:style="{background:footer_background}">
				<text class="tips">— 已经到底了 —</text>
			</view>
		</scroll-view>

		<view class="loading" v-if="loading">
			<text class="icon cuIcon-loading2"></text>
			<text class="tips">努力加载中</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'roc-scroll',
		props: {
			// 占用高度
			visible_height: {
				type: Number,
				default: 0
			},
			refresher_background: {
				type: String,
				default: "#ffffff"
			},
			solt_height: {
				type: Number,
				default: 0
			},
			custom_navigation_style: {
				type: Boolean,
				default: false
			},
			hasMore: {
				type: Boolean,
				default: true
			},
			show_footer: {
				type: Boolean,
				default: true
			},
			footer_background: {
				type: String,
				default: "#f5f5f5"
			},
			background: {
				type: String,
				default: "#ffffff"
			},
			data_number: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				windowHeight: 603,
				loading: false,
				triggered: false,
			}
		},
		computed: {
			scrollHeight() {
				return this.windowHeight - this.visible_height;
			},
			has_more_state() {
				return this.hasMore;
			},
			solt_content_height() {
				return this.solt_height;
			}
		},
		mounted() {
			this.getSystemInfo()
		},
		methods: {
			getSystemInfo() {
				let statusBarHeight
				let windowHeight
				uni.getSystemInfo({
					success: (res) => {
						windowHeight = res.windowHeight
						statusBarHeight = res.statusBarHeight
					}
				})
				let navbarHeight = 44
				// #ifdef MP-WEIXIN
				// 按钮信息
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// 按钮距离底部高度 4
				let menuButtonMarginTop = menuButtonInfo.top - statusBarHeight
				navbarHeight = menuButtonMarginTop * 2 + menuButtonInfo.height
				// #endif
				// #ifdef APP-PLUS
				navbarHeight = 44
				// #endif

				if (this.custom_navigation_style) {
					this.windowHeight = windowHeight - statusBarHeight - navbarHeight
				} else {
					this.windowHeight = windowHeight
				}
			},
			refresherrefresh() {
				this.triggered = true
				// type 0 默认，1 下拉刷新数据，2上拉加载更多
				this.$emit('loadData', 1, (val) => {
					setTimeout(() => {
						this.triggered = val
					}, 1000)
				})
			},
			scrolltolower() {
				if (this.has_more_state) {
					this.loading = true
					this.$emit('loadData', 2, (val) => {
						setTimeout(() => {
							this.loading = val
						}, 1000)
					})
				}
			},
			scroll(e) {
				this.$emit('scroll', e)
			},
		}
	}
</script>

<style lang="scss">
	.roc_scroll_wrap {
		position: relative;
		// z-index: 1060;
		background: transparent;

		.refresh {
			width: 100%;
			height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			box-sizing: border-box;
			z-index: 1060;
			position: absolute;
			top: 0;
			left: 0;
			background: transparent;


			.circle {
				content: "";
				position: absolute;
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				border: 4rpx solid transparent;

				&.circle-1 {
					border-top-color: #0093dd;
					animation: halfCircle 1s infinite;
				}

				&.circle-2 {
					border-bottom-color: #fd1b1b;
					animation: halfCircle 1s infinite alternate;
				}

				@keyframes halfCircle {
					0% {
						transform: rotate(0deg);
					}

					100% {
						transform: rotate(360deg);
					}
				}
			}
		}

		.roc_scroll {
			position: relative;
			background: transparent;
		}

		.no-data {
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			color: $roc-color-ccc;
			line-height: 1;
			justify-content: center;

			.cuIcon-wefill {
				font-size: 40px;
				margin-bottom: 5px;
			}

			.tips {
				font-size: 28rpx;
			}
		}

		.loading {
			width: 100%;
			position: absolute;
			background: transparent;
			bottom: 0;
			left: 0;
			z-index: 9999;
			display: flex;
			height: 30px;
			line-height: 30px;
			justify-content: center;
			align-items: center;
			color: #999;

			.icon {
				font-size: 40rpx;
				margin-right: 5px;
				animation: turn 1.5s linear infinite;
			}

			@keyframes turn {
				0% {
					-webkit-transform: rotate(0deg);
				}

				25% {
					-webkit-transform: rotate(90deg);
				}

				50% {
					-webkit-transform: rotate(180deg);
				}

				75% {
					-webkit-transform: rotate(270deg);
				}

				100% {
					-webkit-transform: rotate(360deg);
				}
			}

			.tips {
				font-size: 24rpx;
			}
		}

		.has_footer {
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: $roc-color-ccc;
			font-size: 24rpx;
		}
	}
</style>